<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增文章</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        /* 确保按钮不会重叠 */
        .navbar-right {
            margin-right: 15px;
        }

        /* 针对小屏设备的布局调整 */
        @media (max-width: 768px) {
            .navbar-right {
                float: none;
                text-align: center;
                margin-top: 10px;
            }
            .navbar-brand, .navbar-nav {
                text-align: center;
            }
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">欢迎, abc!</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">经典语录</a></li>
            <li><a href="#">爱情语录</a></li>
            <li><a href="#">心灵鸡汤</a></li>
            <li><a href="#">内涵段子</a></li>
            <li><a href="#">关于</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="{% url 'create_article' %}" class="btn btn-primary">新增文章</a></li>
            <li><a href="{% url 'logout' %}" class="btn btn-danger">登出</a></li>
        </ul>
    </div>
</nav>

<div class="container mt-5">
    <h1 class="text-center mb-4">新增文章</h1>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <!-- 表单字段 -->
        <div class="form-group">
            {{ form.title.label_tag }}
            <div>{{ form.title }}</div>
        </div>
        <div class="form-group">
            {{ form.category.label_tag }}
            <div>{{ form.category }}</div>
        </div>
        <div class="form-group">
            {{ form.tags.label_tag }}
            <div>{{ form.tags }}</div>
        </div>
        <div class="form-group">
            {{ form.img.label_tag }}
            <div>{{ form.img }}</div>
        </div>
        <div class="form-group">
            {{ form.excerpt.label_tag }}
            <div>{{ form.excerpt }}</div>
        </div>
        <div class="form-group">
            {{ form.body.label_tag }}
            <div>{{ form.body }}</div>
        </div>

        <button type="submit" class="btn btn-primary">提交</button>
    </form>
    <a href="{% url 'blogapp:index' %}" class="btn btn-secondary mt-3">返回首页</a>
</div>

<!-- 引入 Bootstrap JS 和依赖 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
</body>
</html>

